import React, {useEffect, useRef, useState} from "react";
import {Button, Col, Icon, Input, List, Row} from "antd";
import PropTypes from 'prop-types';
import stopPropagation from "../utils/stopPropagation";
import useKeyPress from "../hooks/useKeyPress";

const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
    const [editStatus, setEditStatus] = useState(false);
    const [value, setValue] = useState('');
    const enterPressed = useKeyPress(13);
    const escPressed = useKeyPress(27);
    let node = useRef(null);

    const closeSearch = () => {
        setEditStatus(false);
        setValue('');
    };

    // 键盘监听
    useEffect(() => {
        if (enterPressed && editStatus) {
            const editItem = files.find(file => file.id === editStatus);
            onSaveEdit(editItem.id, value);
            setEditStatus(false);
            setValue('');
        } else if (escPressed && editStatus) {
            closeSearch();
        }
    });

    useEffect(() => {
        if (editStatus) {
            node.current.focus();
        }
    }, [editStatus]);

    return (
        <List
            size="small"
            dataSource={files}
            renderItem={(file) =>
                <>
                    {
                        (file.id !== editStatus) &&
                        <List.Item
                            key={file.id}
                            onClick={() => {
                                onFileClick(file.id)
                            }}
                            className={'c-link'}
                            actions={[
                                <div style={{color: '#08c'}} key="list-file-edit" onClick={(e) => {
                                    stopPropagation(e);
                                    setEditStatus(file.id);
                                    setValue(file.title);
                                }}><Icon type="edit"/></div>,
                                <div style={{color: '#08c'}} key="list-file-more" onClick={(e) => {
                                    stopPropagation(e);
                                    onFileDelete(file.id)
                                }}><Icon type="delete"/></div>
                            ]}
                        >
                            <Icon type="file-markdown"/> {file.title}
                        </List.Item>
                    }
                    {
                        (file.id === editStatus) &&
                        <Row type="flex" justify="space-between" align="middle">
                            <Col span={18}>
                                <Input
                                    placeholder="file name"
                                    ref={node}
                                    value={value}
                                    onChange={(e) => {
                                        setValue(e.target.value)
                                    }}
                                />
                            </Col>
                            <Col span={1}/>
                            <Col span={5}>
                                <Button
                                    type="primary"
                                    onClick={ ()=> {
                                        closeSearch()
                                    } }
                                >
                                    <Icon type="close" />
                                </Button>
                            </Col>
                        </Row>
                    }
                </>
            }
        />
    )
};

// 属性检查
FileList.prototype = {
    files: PropTypes.arrays,
    onFileClick: PropTypes.func,
    onFileDelete: PropTypes.func,
    onSaveClick: PropTypes.func
};

// 属性默认值
FileList.defaultProps = {
    files: [
        {
            id: '1',
            title: 'first post',
            body: 'should be aware of this',
            createdAt: 1563762965704
        },
        {
            id: '2',
            title: 'second post',
            body: '## this is the title',
            createdAt: 1563762965704
        }
    ]
};

export default FileList;
